<template>
	<div class="pureNewLogContent accQuery" :style="{width:realTimeServiceContent}">
		<div class="right_header" :style='{"background":this.$store.getters.theme[5]}'>
			<div class="listName" :style='{"color":this.$store.getters.theme[6]}'>
				<i class="icon iconfont">&#xe7d8;</i>
				当前位置/游戏分析/流水查询/
				<span>{{title}}</span>
			</div>
		</div>
		<div class="choose_dialog fadeInDown animated">
				<div class="block">
					<el-form :model="form" :rules="rules" ref="form" class="demo-form-inline" :inline="true">
						<div class="import">
							<el-form-item label="日期范围" :label-width="formLabelWidth">
								<el-date-picker
									v-model="form.dateOne"
									type="daterange"
									align="left"
									@change='dateChange'
									placeholder="选择日期范围"
									:picker-options="pickerOptions" prop="dataOne">
								</el-date-picker>
							</el-form-item>
							<el-form-item label="区    服" :label-width="formLabelWidth"  prop="serviceArea">
								<el-select v-model="form.serviceArea" filterable  placeholder="请搜索或选择区服">
									<el-option v-for="(val,key) in serviceAreas" :label="val.label" :value="val.value" :key='key'></el-option>
								</el-select>
							</el-form-item>
							<el-form-item label="账号ID" :label-width	="formLabelWidth"  prop="auID">
								<el-input v-model="form.auID" auto-complete="off" :width="inputWidth"></el-input>
							</el-form-item>
						</div>
						<el-form-item  class="conmit">
							<el-button type="primary" icon="search" @click="search('form')">搜索</el-button>
							<el-button @click="reset('form')">重置</el-button>
						</el-form-item>
					</el-form>
				</div>
			</div>
		<div class="right_content">
			<div class="realTimeServiceTable">
				<div class="realTimeServiceTableHeader" :style='{"background":this.$store.getters.theme[5]}'>
					<span :style='{"color":this.$store.getters.theme[6]}' class="zoomIn animated">查询结果</span>
					<el-button type="primary" size="mini" class="excel"  @click="excel" :style='{"background": this.$store.getters.theme[0],"borderColor":this.$store.getters.theme[1]}'>
						<i class="icon iconfont">&#xe7f0;</i> 导出excel
					</el-button>
				</div>
				<div class="realTimeServiceTableBody">
					<template>
					  <el-table
					  	v-loading="loading"
    					element-loading-text="拼命加载中！"
					    :data="tableData"
					    border
					    :style="{width:realTimeServiceTableWidth}"
					    :default-sort = "{prop: 'time', order: 'descending'}"
					    >
					    <el-table-column sortable align="center"
					        v-for="col in tableHeader"
					        :prop="col.prop" :label="col.label">
					    </el-table-column>
					  </el-table>
					</template>
				</div>
			</div>
		</div>
		<a href="" :download="xlsx" id="hf"></a>
	</div>
</template>
<style lang="stylus" rel="stylesheet/stylus" src="./quotaUpdate.styl"></style>
<script src="./quotaUpdate.js"></script>
